/*
 * @Author: xiaosihan
 * @Date: 2021-04-30 01:24:59
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-05-30 03:32:46
 */

import React from "react";
import { LinePoints } from "../Line/Line";
import Group3D from "../Group3D/Group3D";
import LineSegments from "../LineSegments/LineSegments";
import Object3DComponent, { Object3DComponentProps } from "../Object3D/Object3DComponent";
import Text2D from "../Text/Text2D";


export interface AxesHelperProps extends Object3DComponentProps {
    length: number
}

interface State { }

export default class AxesHelper extends Object3DComponent<AxesHelperProps, State> {
    constructor(props: AxesHelperProps) {
        super(props);
    }

    static defaultProps = {
        length: 50,
        position: { x: 0, y: 0, z: 0 },
    }

    mark = (color = "#ff0000", rotation = { x: 0, y: 0, z: 0 }) => {
        const { props } = this;
        let mark: JSX.Element[] = [];
        for (let i = props.length * -1; i <= props.length; i++) {

            if (i !== 0) {

                let markLentg = 0.5; // 刻度的长度
                if (i % 10 === 5) {
                    markLentg = 1
                } else if (i % 10 === 0) {
                    markLentg = 2
                }

                // 每隔10个单位 才有 数组标注
                if (i % 10 === 0) {
                    mark.push(
                        <Text2D
                            key={`2d_mark${i}`}
                            text={String(i)}
                            size={1}
                            position={{ x: i, z: markLentg + 2 }}
                            color={color}
                            textAlign="center_center"
                            clipping={false} // 不使用裁剪
                            // rotation={rotation}
                            lookAt="camera"
                        />
                    )
                }
            }
        }
        return mark

    }

    computMarkByLength = (length: number) => {
        let points: LinePoints = [];
        for (let i = length * -1; i <= length; i++) {

            if (i !== 0) {

                let markLentg = 0.5; // 刻度的长度
                if (i % 10 === 5) {
                    markLentg = 1
                } else if (i % 10 === 0) {
                    markLentg = 2
                }

                points.push([i, 0, markLentg], [i, 0, markLentg * -1]);

            } // if

        } // for

        return points;
    }

    render() {

        const { dev } = this.context;

        if (!dev) {
            return null;

        }
        const { props, mark } = this;

        return (
            <Group3D>
                <Group3D rotation={{ x: 0, y: 0, z: 0 }} >
                    <LineSegments
                        points={[
                            [props.length * -1, 0, 0],
                            [props.length, 0, 0],
                            ...this.computMarkByLength(props.length)
                        ]}
                        color={["#f00"]}
                        clipping={false}
                        dashSize={1}
                        gapSize={0}
                        dashSpeed={0}
                    />
                    {mark("#ff0000")}
                </Group3D>

                <Group3D rotation={{ x: Math.PI / 2, y: Math.PI / 2, z: 0 }} >
                    <LineSegments
                        points={[
                            [props.length * -1, 0, 0],
                            [props.length, 0, 0],
                            ...this.computMarkByLength(props.length)
                        ]}
                        color={["#0f0"]}
                        clipping={false}
                        dashSize={1}
                        gapSize={0}
                        dashSpeed={0}
                    />
                    {mark("#0f0", { x: Math.PI / -2, y: 0, z: Math.PI / -2 })}
                </Group3D>

                <Group3D rotation={{ x: Math.PI, y: Math.PI / 2, z: 0 }} >
                    <LineSegments
                        points={[
                            [props.length * -1, 0, 0],
                            [props.length, 0, 0],
                            ...this.computMarkByLength(props.length)
                        ]}
                        color={["#00f"]}
                        clipping={false}
                        dashSize={1}
                        gapSize={0}
                        dashSpeed={0}
                    />
                    {mark("#00f", { x: Math.PI, y: Math.PI / 2, z: 0 })}
                </Group3D>
            </Group3D>
        );
    }
}